<template>
  <div class="container">
    <div class="mind-wrapper">
      <div class="mind-card">
        <div class="card-header">
          <div class="title-section">个人中心</div>
        </div>
        
        <div class="avatar-section" @click="chooseAvatar">
          <img :src="avatar" alt="头像" class="avatar">
          <div class="avatar-hint">点击更换头像</div>
        </div>
        <div class="input-group">
          <h3 class="field-label">名字</h3>
          <van-field v-model="name" placeholder="请输入名字" class="custom-field" />
        </div>
        <div class="input-group">
          <h3 class="field-label">联系方式</h3>
          <van-field v-model="contact" placeholder="请输入联系方式" class="custom-field" />
        </div>
        <div class="input-group">
          <h3 class="field-label">技术领域</h3>
          <van-field v-model="skill" type="textarea" autosize placeholder="请输入技术领域" class="custom-field" />
        </div>
      </div>
      <div class="button-section">
        <van-button class="logout-btn" @click="logout">退出登录</van-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { Button as VanButton, Field as VanField } from 'vant'

const router = useRouter()
const name = ref('小哥')
const skill = ref('无所不能')
const contact = ref('1233211234567')
const avatar = ref('/src/assets/avatar.jpg')

const chooseAvatar = () => {
  const fileInput = document.createElement('input')
  fileInput.type = 'file'
  fileInput.accept = 'image/*'

  fileInput.onchange = (event) => {
    const file = event.target.files[0]
    if (file) {
      const localUrl = URL.createObjectURL(file)
      avatar.value = localUrl
      console.log('选择了文件:', file.name)
    }
  }

  fileInput.click()
}

const logout = () => {
  alert('退出登录成功')
  setTimeout(() => {
    router.push('/login')
  }, 1500)
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: linear-gradient(to bottom, #979797, #ffffff);
  position: relative;
}

.mind-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 20px;
  flex-grow: 1;
}

.mind-card {
  width: 320px;
  opacity: 1;
  border-radius: 20px;
  background-color: white;
  border: 2px solid #000;
  box-shadow: 12px 10px 10px rgba(0, 0, 0, 0.4);
  padding: 25px;
  margin: 60px 0 20px 0;
  transition: all 0.3s ease;
}

.card-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 15px;
}

.title-section {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 4px;
  color: #333;
  margin: 15px 0 5px;
  padding-bottom: 10px;
  border-bottom: 1px solid #656565;
  width: 100%;
}

.avatar-section {
  text-align: center;
  margin: 25px 0;
  position: relative;
}

.avatar {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid #000;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s ease;
}

.avatar:hover {
  transform: scale(1.05);
}

.avatar-hint {
  font-size: 12px;
  color: #666;
  margin-top: 8px;
}

.input-group {
  margin-bottom: 20px;
  padding: 0 5px;
}

.field-label {
  font-size: 16px;
  margin: 8px 0;
  color: #333;
  font-weight: bold;
}

.custom-field {
  border-radius: 10px;
  background-color: #ffffff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  border: 1px solid #ddd;
}

.back-button {
  display: inline-block;
  padding: 6px 15px;
  background-color: #333;
  color: #ffffff;
  font-size: 14px;
  border-radius: 20px;
  cursor: pointer;
  margin: 5px 0;
  text-align: center;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  align-self: flex-start;
}

.back-button:hover {
  background-color: #222;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
}

.back-button:active {
  transform: translateY(1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.button-section {
  margin-top: 10px;
  width: 320px;
}

.logout-btn {
  width: 100%;
  height: 45px;
  font-weight: bold;
  border-radius: 25px;
  background: #333;
  border: 1px solid #333;
  color: white;
  font-size: 16px;
  box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.4);
  transition: all 0.3s ease;
}

.logout-btn:hover {
  background: #222;
  transform: translateY(-2px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.5);
}

.logout-btn:active {
  opacity: 0.9;
  transform: translateY(2px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
}

</style>